<template>
  <!-- 
  el-dialog
     visible:控制弹框是否显示
     width:设置宽度
     title:设置标题
     @close:关闭的回调事件
     slot="title/默认插槽/footer"
     title:可以修改标题部分
     默认插槽就是弹框内容
     footer:弹框的底部，常用于确定与取消按钮


     .sync修饰符
     实现数据的双向绑定
     传  :属性名.sync=值    
     收  props:['属性名']
         this.$emit('update:属性名',值)   

     表单验证：
       1：el-form:  model rules  ref
       2:el-form-item   prop
       3:rules规则
       { add: '新增部门', edit: '编辑部门' }[mode]
       let title={ add: '新增部门', edit: '编辑部门' }
       title.add/title.edit===title[mode]
           :title="{ add: '新增部门', edit: '编辑部门' }[mode]"
 -->
  <el-dialog :visible="isShow" :title="title" @close="closeEvent">
    <el-form label-width="120px" :model="form" :rules="rules" ref="form">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>

      <el-form-item prop="manager" label="部门负责人">
        <!-- 部门负责人的处理:获取数据并渲染
              1:定义接口api,
              2:导入与调用,存储数据
              3:渲染处理
         -->
        <el-select v-model="form.manager">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :value="item.username"
            :label="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="form.introduce"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align:center">
        <el-button @click="closeEvent">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import {
  sysUserSimple,
  companyDepartmentAdd,
  companyDepartmentPut
} from '@/api/departments'
export default {
  props: {
    initData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    mode: {
      handler (newVal) {
        this.title = newVal === 'add' ? '新增部门' : '编辑部门'
      }
    }
  },
  data () {
    return {
      title: '新增部门',
      isShow: false,
      data: '', // 当前点击项的数据
      userList: [],
      mode: 'add', // add表示 新增 edit表示 编辑
      form: {
        name: '', //string	非必须		部门名称
        code: '', //string	非必须		部门编码，同级部门不可重复
        manager: '', //string	非必须		负责人名称
        introduce: '', //string	非必须		介绍
        pid: '' //string	非必须		父级部门ID
      },
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50个字符', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              // 找到同级部门(当前点击项的子集部门)
              if (this.mode === 'add') {
                let _arr = this.initData.filter(item => {
                  return item.pid === this.data.id
                })
                //   返回值=数组.some(item=>{  return boolean}) 只要有一个项为真，返回值就是真
                let _bol = _arr.some(item => {
                  return item.name === value
                })
                //   let _index = _arr.findIndex(item => {
                //     return item.name === value
                //   })
                //   let _bol = false
                //   _arr.forEach(item => {
                //     if (item.name === value) {
                //       _bol = true
                //     }
                //   })
                //   _index === -1
                //     ? callback()
                //     : callback(new Error('请不要输入重复的部门名称：' + value))
                //   window.console.log('同级部门:', _arr)

                _bol
                  ? callback(new Error('请不要输入重复的部门名称：' + value))
                  : callback()
              } else {
                // 原始数据:initData
                // 当前点击项数据 data:{id,pid}
                let _arr = this.initData.filter(item => {
                  if (item.pid === this.data.pid && item.id !== this.data.id) {
                    return true
                  }
                })
                let _bol = _arr.some(item => {
                  return item.name === value
                })
                // window.console.log('兄弟数组:', _arr)
                _bol ? callback(new Error('重名了:' + value)) : callback()
              }
            },
            trigger: 'blur'
          }
          /*
          同级部门中禁止出现重复部门
        1:拿到当前点击项的id(也就是自己添加的子项的pid)
          通过bus传值将当前点击项的所有数据都传过来了，这里面自然就有id
        2:拿到对应的组织架构列表数据
           通过props父传子将列表数据传递给弹框组件
        3：验证它是否重复
           自定义表单验证
        */
        ], //string	非必须		部门名称
        code: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50个字符', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              let _bol = false
              if (this.mode === 'add') {
                _bol = this.initData.some(item => {
                  return item.code === value
                })
              } else {
                _bol = this.initData.some(item => {
                  return item.code === value && item.id !== this.data.id
                })
              }
              _bol
                ? callback(new Error('请不要输入重复的部门code:' + value))
                : callback()
            },
            trigger: 'blur'
          }
        ], //string	非必须		部门编码，同级部门不可重复
        manager: [{ required: true, message: '必填', trigger: 'change' }], //string	非必须		负责人名称
        introduce: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 1, max: 300, message: '请输入1-300个字符', trigger: 'blur' }
        ] //string	非必须		介绍
      }
    }
  },
  async created () {
    // $on监听事件它是可以累加的，也就是你不销毁它，就会不停累加
    this.$bus.$on('showAdd', (bol, data, mode = 'add') => {
      this.mode = mode
      // mode:add表示新增  edit表示编辑
      // data:当前点击项的所有数据
      //   window.console.log('bol:', bol)
      this.isShow = bol
      this.data = data
      if (mode === 'edit') {
        // 数据的回显
        this.form = JSON.parse(JSON.stringify(data))
      }
    })
    // 获取简易员工列表数据

    this.userList = await sysUserSimple()
    // window.console.log('员工列表:', res)
  },

  beforeDestroy () {
    this.$bus.$off('showAdd')
  },
  methods: {
    closeEvent () {
      this.isShow = false
      // form用于重置表单数据(重置表单数据为初始化数据)与表单错误验证的方法 resetFields()
      /*
      重置表单数据为初始化数据
      什么叫初始化数据:el-form组件第一次使用的数据
      重置的form表单数据实际 就是我们第一次打开弹框时form表单的数据
      */
      this.$refs.form.resetFields()
      this.form = {
        name: '', //string	非必须		部门名称
        code: '', //string	非必须		部门编码，同级部门不可重复
        manager: '', //string	非必须		负责人名称
        introduce: '', //string	非必须		介绍
        pid: '' //string	非必须		父级部门ID
      }
    },
    // 确定按钮点击
    submit () {
      /*
    新增部门:
      1:定义新增api,
      2:导入,在表单验证成功后调用,
      3:在接口调用成功后
         a:关闭弹窗
         b:清理弹框内的数据
         c:刷新父级列表数据
         d:提示一下
    */

      this.$refs.form.validate(async result => {
        if (result) {
          if (this.mode === 'add') {
            this.form.pid = this.data.id
            await companyDepartmentAdd(this.form)
            this.$message.success('新增部门成功')
          } else {
            await companyDepartmentPut(this.form)
            this.$message.success('编辑部门成功')
          }
          this.closeEvent()
          this.$emit('getData')
        } else {
          // this.$message.error('验证失败')
        }
      })
    }
  }
}
</script>
<style></style>
